import { ColorPicker } from 'antd'

function Pens({ activePenId, onChangeActivePenId, penColor, onChangePenColor }) {
  const penList = [
    {
      id: 1,
      img: new URL('../../assets/images/pen1.jpg', import.meta.url).href
    },
    {
      id: 2,
      img: new URL('../../assets/images/pen2.jpg', import.meta.url).href
    },
    {
      id: 3,
      img: new URL('../../assets/images/pen3.jpg', import.meta.url).href
    },
    {
      id: 4,
      img: new URL('../../assets/images/pen4.jpg', import.meta.url).href
    },
    {
      id: 5,
      img: new URL('../../assets/images/pen5.jpg', import.meta.url).href
    },
    {
      id: 6,
      img: new URL('../../assets/images/eraser.jpg', import.meta.url).href
    }
  ]
  const handleChangeColor = (color) => {
    onChangePenColor(color.toHexString())
  }
  return (
    <div className="pens-container">
      <div className="bottom-toolbar">
        {penList.map((item, index) => (
          <div key={index}
            onClick={() => onChangeActivePenId(item.id)}
            className={`pen-container ${activePenId === item.id && 'active'}`}
          >
            <img id={`pen-${item.id}`} src={item.img} alt={`pen-${item.id}`} />
          </div>
        ))}
        {/* 颜色选择器 */}
        <div className="color-picker">
          <ColorPicker value={penColor} onChange={handleChangeColor} />
        </div>
      </div>
    </div>
  )
}

export default Pens
